<template>
	<!-- <page-meta :page-style="noSlide?'overflow: hidden;' : 'overflow: auto;'"></page-meta> -->
  <view>	  
    <view class="tui-actionsheet" :class="[show ? 'tui-actionsheet-show' : '']">
	<view class="regional-selection">
		<view class="specs">
			<view class="specs-top">
			    <view>已选商品</view>
			    <view style="color: gray;" @click="delcar">清空购物车</view>  
			</view>
		    <swiper class="tab-content"  duration="300" bindchange="changeTab" style="height:690rpx">
				<!-- 全部 -->
				<swiper-item>					  
					<scroll-view :scroll-y="true" class="new-list-box"    :refresher-enabled="false" refresher-threshold="80">
					<view v-for="(goods,key,index) in carlist" :key="index"> 
					  <view class="flex  mb-30"   v-for="(goods1,index1) in carlist[key].list"   :key="index1">
				     	<image class="specs-image" shape :src="goods1.goods_image"></image>
						<view class="flex flex-direction ml-20" style="width: 600rpx">
						    <view class="flex specs-goods-name productNameText">{{goods1.goods_title}}</view>
						    <view class="flex specs-goods">{{goods1.goods_spec}}</view>
					    	<view class="flex justify-between">
							<view class="specs-price">￥{{goods1.goods_price}}</view>
							<view class="specs-price">
							<t-input-number :value="goods1.goods_number" :carId="goods1.id" @InputNumber="InputNumber"></t-input-number>
							</view>
						</view>
					  </view>
					  </view>                 
					</view> 
				    </scroll-view>
				</swiper-item>        
			</swiper>        
		  </view>
		  <view class='button-submit' style="border-top: 1rpx solid #f0ebeb;">
		    <view class="flex justify-between align-center pt-30 mb-15">         
				<view class="submit-btn-right" style="background: #2B91ED;" v-if="type ==1" @click.stop="confirm_order()">去结算</view>
				<view class="submit-btn-right" style="background: #2B91ED;" v-if="type ==2" @click="payOrder">去派单</view>
			</view>   
		  </view>
	  </view>
	  
    </view>
	   <!-- 遮罩层 -->
		<view			 
		  class="tui-actionsheet-mask"
		  :class="[show ? 'tui-mask-show' : '']"
		  @tap="handleClickMask"
		></view>
  </view>
</template> 
<script>
	import input_number from "@/components/input-number/index.vue";
export default {
	components: {
	   "t-input-number": input_number,
	},
  props: {
    //点击遮罩 是否可关闭
    maskClosable: {
      type: Boolean,
      default: true,
    },
    //显示操作菜单
    show: {
      type: Boolean,
      default: false,
    },
  },
  data () {
	return {
		carlist:{},    
		type:1,
		triggered: false,
		noSlide:true
	}  
  },
methods:  { 
	//确认订单
	confirm_order(){
		// 去结算
		uni.setStorageSync('shop_type', 'carts');
		uni.navigateTo({
			url:"/pages/pagesOrder/confirm/index"
		})
	},
    handleClickMask() {
		this.$emit("PaygoodsCancel",false);
    },
	showGoods(event,type='1'){
	  this.carlist=event.list,
	  this.type=type
	},
	allLoadMore(e){		
		return true
	},
	InputNumber(e){
		let that=this
	    let obj_data={
			token:uni.getStorageSync('userInfo').app_openid,
			login_type:'app',
		    carId:e.carId,
		    number:1,
		    type:e.type=='Plus'?"1":"2",
		}        
		this.$http.caredit(obj_data).then(res=>{          
			if(res.resCode=="9999"){				
				for(let key in that.carlist){
						for(let i=0; i<(that.carlist[key].list.length);i++){
							if(that.carlist[key].list[i].id==e.carId){
								if(obj_data.type==1){
								 that.carlist[key].list[i].goods_number++
								}else{
								    if(that.carlist[key].list[i].goods_number==1){
									   that.carlist[key].list.splice(i, 1)
								    } else that.carlist[key].list[i].goods_number--;								
								}
							}
						}						
				}	
				this.$emit('editGoods',res.data)			
			} else {
				uni.showToast({title: res.resMessage,icon:"none"})
			}          
		})
	},
	delcar(){
		let that=this
		let obj_data={
			token:uni.getStorageSync('userInfo').app_openid,
			login_type:'app',         
		}	
		this.$http.cardel(obj_data).then(res=>{
			uni.showToast({title: res.resMessage,icon:"none"})
			this.$emit("PaygoodsCancel",false);
			that.$emit('echangeCardel', {});
		})
	},
	//点击去派单
	payOrder(){
		uni.navigateTo({
			url:"/pages/pagesuser/dispatch/index"
		})
	},
    
   
  },
};
</script>
 
<style scoped lang="less">
	
.tui-actionsheet {
  width: 100%;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 99999;
  visibility: hidden;
  transform: translate3d(0, 100%, 0);
  transform-origin: center;
  transition: all 0.3s ease-in-out;
  // background: #eaeaec;
  min-height: 100rpx;
}
 
.tui-actionsheet-show {
  transform: translate3d(0, 0, 0);
  visibility: visible;
}
.regional-selection {
    text-align: center;
  height: 900rpx;
  background: #fff;
  border-radius: 10rpx;
}
.tui-actionsheet-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 9999;
  transition: all 0.3s ease-in-out;
  opacity: 0;
  visibility: hidden;
}
 
.tui-mask-show {
  opacity: 1;
  visibility: visible;
}

/* component/specs/index.wxss */
.specs{
  padding: 0 20rpx;
  align-items: flex-end;

}

.productNameText{color:rgb(32,27,27);font-size:35rpx;text-overflow:ellipsis;display:-webkit-box;word-break:break-all;-webkit-box-orient:vertical;-webkit-line-clamp:1;overflow:hidden;}

.specs-top{
  display: flex;
  flex-direction: row;
  font-size: 23rpx;
  justify-content:space-between;
  padding-bottom: 15rpx;
  padding-top: 30rpx;
  border-bottom: 1rpx solid rgb(240, 235, 235);
}
.specs-image {
  width: 152rpx !important;
  height: 152rpx !important;
  background: rgba(0, 0, 0, 0);
  border: 1rpx solid #E5E9E8;
  border-radius: 16rpx;
}

.specs-title {
  font-size: 30rpx;
  color: #333333;
  opacity: 1;
  margin: 30rpx 0 20rpx 0;
}

.specs-cell{
  display: flex;
  flex-wrap: wrap;
}

.specs-name {
  color: #888888;
  border: 1rpx solid #888888;
  border-radius: 10rpx;
  padding: 15rpx 20rpx;
  font-size: 28rpx;
  margin-right: 15rpx;
  margin-bottom: 20rpx;
}

.specs-goods-name {
	display: flex !important;
  font-size: 32rpx;
  line-height: 40rpx;
  margin-bottom: 10rpx;
}

.specs-goods {
  font-size: 28rpx;
  line-height: 40rpx;
  color: gray;
  margin-bottom: 20rpx;
}
.specs_name{
  margin-top: 40rpx;
  width: 62%;
  border-bottom: 1rpx solid rgb(240, 235, 235);
  
}

.specs-price {
  font-size: 38rpx;
  color: #EE4D52;
  margin-left: -5rpx;
}

.specs-num {
  font-size: 28rpx;
  color: #999999;
}

.submit-btn-left {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFF;
  min-width: 240rpx;
  width: 100%;
  height: 76rpx;
  opacity: 1;
  border-radius: 38rpx 0 0 38rpx;
}

.submit-btn-right {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFF;
  min-width: 240rpx;
  width: 100%;
  height: 76rpx;
  opacity: 1;
  /* border-radius: 0 38rpx 38rpx 0;
  margin-top: 2rpx; */
}
.specs{
 
    margin-bottom: -25rpx;
    
}
.main-bottom{
  display: flex;
  flex-direction:column;
}
.new-list-box{
	height: 100%;
}
</style>